<template>
    <view>
        <QueryByDate @queryDateAgain="getThisPageData"></QueryByDate>

        <uni-list>
            <view v-for="item in parentData" :key="item.id">

                <uni-list :border="true">

                    <!-- 自定义右侧内容 -->
                    <uni-list-chat :title="item.operateUser"
                        avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
                        :note="item.valvePositionNumber" :time="item.operateTime.toString().substring(0, 10)"
                        badge-positon="left" :badge-text="item.status === 1 ? '开' : '关'">
                        <view class="chat-custom-right">
                            <text class="chat-custom-text">{{ item.operateTime.toString().substring(0, 10) }}</text>
                            <!-- 需要使用 uni-icons 请自行引入 -->
                            <!-- <uni-icons type="star-filled" color="#999" size="18"></uni-icons> -->
                            {{ item.operateTime.toString().substring(11) }}
                        </view>
                    </uni-list-chat>

                    <!-- 显示圆形头像（阀门关闭） -->
                    <!-- <uni-list-chat :avatar-circle="true" :title="item.operateUser"
                        avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" badge-positon="left"
                        :note="item.valvePositionNumber" :badge-text="item.status === 1 ? '开' : '关'"
                        :time="item.operateTime.substring(0, 10)"></uni-list-chat> -->

                    <!-- 头像显示圆点(阀门开启) -->
                    <!-- <uni-list-chat title="uni-app"
                        avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息"
                        time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> -->
                </uni-list>
            </view>

        </uni-list>


    </view>
</template>
<script setup lang="ts">
import { ref, defineComponent, } from 'vue';
import QueryByDate from './QueryByDate.vue';
import type ValvesOperationRecord from '@/types/valvesOperationRecord';

// const getThisPageData = (val: any) => {
//     console.log('yyy');

//     console.log('getThisPageData', val);
// }
const parentData = ref<ValvesOperationRecord[]>([]);

function getThisPageData(newData: ValvesOperationRecord[]) {
    //console.log('getThisPageData', newData);
    parentData.value = newData; // 更新父组件的数据
    //console.log('parentData', parentData.value);

}

// 定义组件（在 <script setup> 中不是必需的，但可以保留以明确意图）
const MyComponent = defineComponent({})

// 创建一个响应式的 avatarList 数组
const avatarList = ref([
    {
        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
    },
    {
        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
    },
    {
        url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
    }
]);
</script>
<style lang="scss">
.chat-custom-right {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.chat-custom-text {
    font-size: 12px;
    color: #999;
}
</style>